vue
<template>
  <div>
    <el-form :inline="true">
      <el-form-item v-if="isInside">
        <select-staff
          v-model="params.user_id"
          placeholder="签到人"
          @change="getData()"
          clearable
        ></select-staff>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          type="date"
          value-format="yyyy-MM-dd"
          @change="getData()"
          placeholder="签到时间"
          v-model="params.create_time"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['sign_type.eq']"
          placeholder="签到类型"
          @change="getData()"
          clearable
          :options="enumSignType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button type="primary" @click="handleEdit" icon="el-icon-plus">签到</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.sign_style}`">
          {{ scope.row.sign_label }}
        </span>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <sing-edit
      :visible.sync="editVisible"
      @success="getData()"
      :table-id="tableId"
      :form-data="editData"
    ></sing-edit>
  </div>
</template>

<script>
import { dateFormat } from '@/common/utils/common'
import { enumAccessStatusLabel, enumSignType } from '@/credit/plugins/enumCadmin'
import { mapGetters } from 'vuex'
import SingEdit from '@/credit/views/city/manage/SingEdit'
import SelectStaff from '@/components/select/SelectStaff'
export default {
  components: {
    SelectStaff,
    SingEdit,
  },
  data() {
    return {
      enumSignType,
      params: {
        index: 1,
        size: 15,
      },
      tableData: [],
      tableColumns: [
        { attrs: { label: '签到人', prop: 'real_name' } },
        { attrs: { label: '签到地址', prop: 'address' } },
        { attrs: { label: '签到时间', prop: 'create_time' } },
        { attrs: { label: '签到类型', prop: 'sign_label', align: 'center' }, slot: 'status' },
        { attrs: { label: '备注说明', prop: 'remark' } },
      ],
      totalCount: 0,
      loading: false,
      order: {
        create_time: 'desc',
      },
      tableName: 'sign_in',
      editVisible: false,
      tableId: '',
      editData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
    isInside() {
      return this.user.scopeArr.includes('inside')
    },
  },
  created() {
    this.params['service_id.eq'] = this.clientId
    if (!this.isInside) {
      this.params['user_id.eq'] = this.user.userId
    }
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.create_time = dateFormat(item.create_time, 'yyyy.MM.dd hh:mm:ss')
      const sign = enumAccessStatusLabel[item.sign_type] || {}
      item.sign_label = sign.label
      item.sign_style = sign.style
      return item
    },
    handleEdit() {
      this.editData = {
        sign_type: new Date().getHours() < 12 ? '1' : '2',
      }
      this.editVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
